<template>
  <div class="list-table-box noPrint" style="display: none;">
    <div v-if="formList instanceof Array && formList.length > 0" id="print" ref="print">
      <PageForm :form-list="formList" :model="form" />
    </div>
    <el-button type="warning" icon=" " size="small" @click="doPrint">{{ $t('打印') }}</el-button>
  </div>
</template>

<script>
export default {
    components: {
    },
    data() {
      return {
        // 菜单标识
        menuKey: 'demo',
        // 遮罩层
        loading: false,
        // 表单校验
        rules: {},
        form: {
          company: { companyName: undefined }
        },
        // 币种集合
        currencyOptions: [],
        // 联选类型
        cascaderOptions: [
          {
            label: 'label1',
            value: 1,
            children: [
              {
                label: 'label2',
                value: 2
              }
            ]
          }
        ],
        isNotForm: '非form值类型'
      }
    },
    computed: {
      formList() {
        var companyName = this.form.company.companyName
        // title:  label 名称
        // value： form内需要显示的值
        // style: 传入特殊样式   居中的话 需要使用 'justify-content': 'center'  默认是 flex-start   在后面展示使用  flex-end
        // width: 为宽度 可以设置内容的宽度   每一行总共100  按照百分比来进行拆分 默认每个都是 25%
        // table: 表格格式来进行展示
        // list: 展示列表内容的 里面套用的还是表格
        // 外部type 总共有3种   table、title、list、fileList
        // 内部内容type 总共有8种  input,user,time,money,select,list,mainBody,dept
        // 当类型为input时  传入 inputUnit 可在数值后面加入单位
        // 当要展示非form内容时  传入 isNotForm  value内容为展示值 只有输入框以及列表支持
        // 当类型为 time时  timePattern 时间类型  默认为 {y}-{m}-{d}    需要时分秒写  {y}-{m}-{d} {h}:{i}:{s}
        // 当类型为 money时  moneyUnit 单位  默认为元  需要万时  传入  w     inputUnit 当不是万  是万股或者 另外单位时  传入
        // 当类型为 select 时 一种是直接用字典项  则设置 selectType 为dict  dictVal 为字典标签
        // 当类型为 select 时 一种是通过接口请求来的数据  则 selectType 为 options 需要加入 selectDataList 为数据的数组  selectLabelParams 为对应的label值   selectValueParams 为对应的 value值
        // options 示例 { title: '币种', value: 'currency', type: 'select', selectType: 'options', selectDataList: this.currencyList, selectLabelParams: dictLabel, selectValueParams: dictValue },
        // 当类型为 select 时 一种是多级选择的内容 则 设置 selectType 为 cascader 需要加入 selectDataList 为数据的数组
        // 当类型为 mainBody时  需要传入 mainBodySelectChoice 项目类型  要是与其他文本关联时使用  formMainBodySelectChoice
        // file 时  fileDataType 为附件绑定的 dataType    fileBusinessId 为项目的id
        // 当类型为 list 时  展示列表信息  列表内容为  listPageList 里面需要配置每一行信息
        // 当有判断是  vIf 来绑定判断逻辑
        var pageList = [
          { title: '标题类型', value: 'input', type: 'title' },
          { title: '标题类型', value: 'input', type: 'table', tablePageList: [
            { title: '判断不成立', type: 'title', vIf: false, width: '25%', style: { 'justify-content': 'center' }},
            { value: 'input', type: 'input', vIf: false, width: '25%' },
            { title: '判断成立', type: 'title', vIf: true, width: '25%' },
            { value: 'input', type: 'input', vIf: true, width: '25%' },
            { title: '输入框类型', type: 'title', inputUnit: '%', width: '25%' },
            { value: 'input', type: 'input', inputUnit: '%', width: '25%' },
            { title: '非form值类型', type: 'title', width: '25%' },
            { value: this.isNotForm, isNotForm: true, type: 'input', width: '25%' },
            { title: '公司', type: 'title' },
            { value: companyName, isNotForm: true, type: 'input' },
            { title: '用户类型', type: 'title' },
            { value: 'user', type: 'user', userMultiple: false },
            { title: '时间类型', type: 'title' },
            { value: 'time', type: 'time' },
            { title: '金额类型', type: 'title' },
            { value: 'money', type: 'money', moneyUnit: 'w', inputUnit: '元' },
            { title: '币种字典类型', type: 'title' },
            { value: 'dict', type: 'select', selectType: 'dict', dictVal: 'currency' },
            { title: '币种远端获取类型', type: 'title' },
            { title: '币种远端获取类型', value: 'options', type: 'select', selectType: 'options', selectDataList: this.currencyOptions, selectLabelParams: 'dictLabel', selectValueParams: 'dictValue' },
            { title: '联选类型', type: 'title' },
            { title: '联选类型', value: 'cascader', type: 'select', selectType: 'cascader', selectDataList: this.cascaderOptions, selectLabelParams: 'label', selectValueParams: 'value' },
            { title: '项目名称类型', type: 'title' },
            { title: '项目名称类型', value: 'mainBody', type: 'mainBody', mainBodySelectChoice: 'deal' },
            { title: '部门类型', type: 'title' },
            { title: '部门类型', value: 'dept', type: 'dept' },
            { title: '部门类型多选', type: 'title' },
            { title: '部门类型多选', value: 'deptMultiple', type: 'dept', deptMultiple: true }
          ] },
          { title: '列表类型', value: 'list', type: 'list', listPageList: [{ title: '标题类型', value: 'input', type: 'table', tablePageList: [
            { title: '判断不成立', type: 'title', vIf: false },
            { value: 'input', type: 'input', vIf: false },
            { title: '判断成立', type: 'title', vIf: true },
            { value: 'input', type: 'input', vIf: true },
            { title: '输入框类型', type: 'title', inputUnit: '%' },
            { value: 'input', type: 'input', inputUnit: '%' },
            { title: '非form值类型', type: 'title' },
            { value: this.isNotForm, isNotForm: true, type: 'input' },
            { title: '公司', type: 'title' },
            { value: companyName, isNotForm: true, type: 'input' },
            { title: '用户类型', type: 'title' },
            { value: 'user', type: 'user', userMultiple: false },
            { title: '时间类型', type: 'title' },
            { value: 'time', type: 'time' },
            { title: '金额类型', type: 'title' },
            { value: 'money', type: 'money', moneyUnit: 'w', inputUnit: '元' },
            { title: '币种字典类型', type: 'title' },
            { value: 'dict', type: 'select', selectType: 'dict', dictVal: 'currency' },
            { title: '币种远端获取类型', type: 'title' },
            { title: '币种远端获取类型', value: 'options', type: 'select', selectType: 'options', selectDataList: this.currencyOptions, selectLabelParams: 'dictLabel', selectValueParams: 'dictValue' },
            { title: '联选类型', type: 'title' },
            { title: '联选类型', value: 'cascader', type: 'select', selectType: 'cascader', selectDataList: this.cascaderOptions, selectLabelParams: 'label', selectValueParams: 'value' },
            { title: '项目名称类型', type: 'title' },
            { title: '项目名称类型', value: 'mainBody', type: 'mainBody', mainBodySelectChoice: 'deal' },
            { title: '部门类型', type: 'title' },
            { title: '部门类型', value: 'dept', type: 'dept' },
            { title: '部门类型多选', type: 'title' },
            { title: '部门类型多选', value: 'deptMultiple', type: 'dept', deptMultiple: true }
          ] }] },
          { title: '附件信息', value: 'fileList', type: 'fileList', listType: 'vertical',
            listPageList: [
              { title: '文件分类', value: 'directoryName' },
              { title: '附件名称', value: 'name' },
              { title: '备注', value: 'remark' },
              { title: '上传人', value: 'updateBy', childrenValue: 'nickName' },
              { title: '上传时间', value: 'createTime' }
            ]
          }
        ]
        return pageList
      }
    },
    created() {
      // 付款币种
      this.getDicts('currency').then(response => {
        this.currencyOptions = response.data
      })
      this.$bus.$emit('async_done')
      this.init()
    },
    methods: {
      // 初始化数据
      init() {
        this.$nextTick(() => {
          this.form = {
            input: '输入框类型',
            user: '1',
            time: '2023-12-1',
            money: '10000',
            company: { companyName: '公司' },
            dict: 'CNY',
            options: 'USD',
            cascader: [1, 2],
            mainBody: 'f4f68278f3df41cc9d6735a2759667ed',
            dept: '1111',
            deptMultiple: ['1111', '701'],
            list: [
              {
                input: '输入框类型',
                user: '1',
                time: '2023-12-1',
                money: '10000',
                dict: 'CNY',
                options: 'USD',
                cascader: [1, 2],
                mainBody: 'f4f68278f3df41cc9d6735a2759667ed',
                dept: '1111'
              },
              {
                input: '输入框类型',
                user: '1',
                time: '2023-12-1',
                money: '10000',
                dict: 'CNY',
                options: 'USD',
                cascader: [1, 2],
                mainBody: 'f4f68278f3df41cc9d6735a2759667ed',
                dept: '1111'
              }
            ],
            fileList: [
              {
                id: '1dacc8994039473abdde0d90a707825d',
                name: '新建 文本文档.txt',
                dataId: 'acff0568463541a68da57021b508a930',
                businessId: '09da27fe31a44fb58d3897d233bd26c4',
                dataType: 'deal_distribution',
                directoryId: '20b8d6b60ae940f78a114bdcc366d100',
                directoryName: '立项结果文件上传',
                remark: '备注',
                updateBy: { nickName: '许可' },
                createTime: '2023-12-12'
              },
              {
                id: '1dacc8994039473abdde0d90a707825d',
                name: '新建 文本文档.txt',
                dataId: 'acff0568463541a68da57021b508a930',
                businessId: '09da27fe31a44fb58d3897d233bd26c4',
                dataType: 'deal_distribution',
                directoryId: '20b8d6b60ae940f78a114bdcc366d100',
                directoryName: '立项结果文件上传1',
                remark: '备注1',
                updateBy: { nickName: '许可' },
                createTime: '2023-12-12'
              },
              {
                id: '1dacc8994039473abdde0d90a707825d',
                name: '新建 文本文档.txt',
                dataId: 'acff0568463541a68da57021b508a930',
                businessId: '09da27fe31a44fb58d3897d233bd26c4',
                dataType: 'deal_distribution',
                directoryId: '20b8d6b60ae940f78a114bdcc366d100',
                directoryName: '立项结果文件上传1',
                remark: '备注1',
                updateBy: { nickName: '许可' },
                createTime: '2023-12-12'
              }
            ]
          }
        })
      },
      // 表单重置
      reset() {
        this.form = {
        }
        this.resetForm('form')
      },
      // 取消按钮
      cancel() {
        this.$parent.$parent.formOpen = false
        this.$parent.$parent.reset()
      },
      // 关闭form页面
      closeForm() {
        // 关闭form页面遮罩层
        this.loading = false
        // 关闭form页面
        this.$parent.$parent.formOpen = false
        // 刷新list页面
        this.$parent.$parent.getList()
      },
      /** 提交按钮 */
      submitForm() {
        return new Promise((resolve) => {
          resolve()
        }).catch(() => {
            this.loading = false
        })
      },
      doPrint() {
        this.$print(this.$refs.print)
      }
    }
}
</script>
<style scoped>
    .list-table-box {
      width: 100%;
      /* height: 100%; */
      /* overflow: auto; */
    }
</style>
